<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.top{
    width: 100%;
    height: 120px;
    position: absolute;
    background-color: greenyellow;
    
};
.main{
    position: absolute;
    width: 100%;
    top: 120px;
    bottom: 120px;
    background-color: azure;
    height: auto;
};
.bottom{
    position: absolute;
    /* // 别漏了 */
    bottom: 0;
    width: 100%;
    height: 120px;
    background-color:greenyellow
}
    </style>
</head>
<body>
    <!-- <button>点击</button> -->
    <div>
        <div class="top">
            120px
        </div>
        <div class="main">
            自适应
        </div>
        <div class="bottom">
            120px
        </div>
    </div>
    <script>
        // 关键字高亮原理
        // var str = 'hello'
        // var st = 'el'
        // var btn = document.querySelector('button')
        // btn.onclick = function () {
        //   st = str.replace(st, '<span style="color:red">'+st+'<span>')
        //   console.log(st)
        // }

        // 冒泡排序
        // var arr = [5,8,4,3,6,2,1,9,8,9,9,7,7,4,4]
        // for(var i = 0; i < arr.length - 1; i++){
        //     for(var j = 0; j < arr.length - 1 - i; j++){
        //         if(arr[j] > arr[j + 1 ]){
        //             var item = arr[j]
        //             arr[j] = arr[j + 1]
        //             arr[j + 1] = item
        //         }
        //     }
        // }
        // 数组去重
        // var atr = []
        // for(var i = 0; i < arr.length; i++){
        //   if(atr.indexOf(arr[i]) == -1){
        //       atr.push(arr[i])
        //   }
        // }
        //   console.log(atr);
        // console.log(arr);


    </script>
</body>
</html>